<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <link href="/static/css/left.css" rel="stylesheet">

    <style>
        body{
            background-color: #fafafa;
        }

        .right_content{
            width: 900px;
            background-color: #ffff;
            padding: 3%;
            min-height: 600px;
        }
        .right_content div{
            padding: 1% 0px;
        }
        .title_content span{
            font-size: 20px;
            font-weight: 600;
        }
        .layui-btn.layui-bg-blue{
            background-color: #276040 !important;
            width: 100px !important;
            border-radius: 5px !important;
        }
        th{
            border-left: solid 1px #ffffff !important;
            border-top: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            background-color: #fafafa;
            padding: 0px 25px !important;
            height: 50px ;

        }
        td{
            border-left: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            border-: solid 1px #ffffff !important;
            padding: 0px 25px !important;
            height: 50px;
            color: #a9a9a9 !important;
        }

        tbody tr td button{
            border-color: #276040 !important;;
            color: #276040 !important;
            border-radius: 5px !important;

        }

        .table_content{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .table_content ul li {
            padding: 8% 0px;
        }

        .table_content ul li span{
            padding: 0px 30px;
            font-size: 14px;
            font-weight: 500;
        }
        .table_content ul li input{
            height: 35px;
            width: 250px;
            border: 1px solid #e2e2e2;

        }
        .table_content ul li div{
            display: flex;
            justify-content: center;
        }

    </style>

</head>
<body>

   <div th:replace="/navigation_bar/top :: headerFragment"></div>
    <div class="content" style="max-width: 1220px; display: flex;margin: 0 auto;padding: 2% 0;justify-content: space-between;">

        <div th:replace="/navigation_bar/left :: left_layout"></div>

        <div class="right_content">
            <div class="title_content"><span>用户管理</span></div>
            <div class="table_content">
               <ul>
                   <li>
                       <span>账号</span> <input type="text" name="name" id="name" th:value="${user.name}">
                   </li>
                   <li>
                       <span>密码</span> <input type="password" name="password" id="password">
                   </li>
                   <li>
                       <span>姓名</span> <input type="text" name="fullName" id="fullName" th:value="${user.fullName}">
                   </li>

                   <li>
                       <div>
                           <input th:value="${user.id}" style="display: none">
                           <button class="layui-btn layui-bg-blue" onclick="saveUser(this)">保存</button>
                       </div>
                   </li>
               </ul>
            </div>
        </div>

    </div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-2.2.2.min.js"></script>
<script src="/static/js/left.js"></script>
<script>

    $(function (){

    })

    function saveUser(e){
        let param = {};
        param.id = $(e).prev().val();
        param.name = $('#name').val();
        param.password = $('#password').val();
        param.fullName = $('#fullName').val();


        $.ajax({
            url: '/user/update', // 请求的URL地址
            type: 'post', // 请求类型，可以是GET、POST等
            dataType: 'json', // 期望返回的数据类型
            data : JSON.stringify(param),
            contentType: 'application/json',
            success: function (data, xhr) {
                if (data.success){
                    window.location.href="/user/list"
                }else {
                    alert(data.message);
                }

            },
            error: function (xhr, status, error) {
                // 请求失败后的回调函数，xhr为XMLHttpRequest对象，status为请求状态，error为错误信息
                console.log('请求失败');
                console.log(error);
            }
        });

    }







</script>
</body>
</html>